<template>
  <div class="logic-flow-container">
    <div class="logic-flow-header">
      <!-- <el-button type="primary" @click="getData">获取数据</el-button>
      <el-button type="primary" @click="submit">提交</el-button> -->
      <el-button type="primary" @click="routerClick" >展示页（数据暂时是写死的）</el-button>
    </div>
    <div class="logic-flow-main">
      <NodePanel :lf="lf"></NodePanel>
      <div class="logic-flow" ref="logicFlowRef" id="logic-flow"></div>
      <!-- <Setting
        class="logic-flow-setting"
        :data="nodeData!"
        :lf="lf"
        :type="settingType"
      ></Setting> -->
      
    </div>
    <!-- 当lf有值 才能注册事件 -->
    <!-- <Control v-if="lf" :lf="lf"></Control> -->
  </div>
</template>

<script lang="ts">
export default { name: "LogicFlow" };
</script>
<script lang="ts" setup>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import { onMounted, reactive, ref, ShallowRef, shallowRef } from "vue";
import NodePanel from "./components/node-panel.vue";
import { registeNode, registerKeyboard, requiredConfig } from "./index";
import { ElMessage } from "element-plus";
import Setting from "./components/setting.vue";
import { SettingType } from "@/types/logic-flow";
import { useRouter } from "vue-router";
const router = useRouter()

const routerClick=()=>{
  router.push('/page')
}
const logicFlowRef = ref<HTMLDivElement>();
const nodeData = ref<LogicFlow.NodeData | LogicFlow.EdgeData>(); // 节点数据
// const state = reactive({
//   settingType: "all" as SettingType,
// });
const settingType = ref<SettingType>("all");
const lf = shallowRef<LogicFlow>();

const getSettingInfo = (data: LogicFlow.NodeData | LogicFlow.EdgeData) => {
  switch (data.type) {
    case "launch":
      nodeData.value = data;
      settingType.value = data.type;
      break;
    case "approver":
      nodeData.value = data;
      settingType.value = data.type;
      break;
    case "link":
      nodeData.value = data;
      settingType.value = data.type;
      break;
    case "review":
      nodeData.value = data;
      settingType.value = data.type;
      break;
    case "polyline":
    case "dashedLine":
      nodeData.value = data;
      settingType.value = data.type;
      break;
  }
};
/**
 * @description 注册事件
 */
const initEvent = (lf: ShallowRef<LogicFlow | undefined>) => {
  lf.value?.on("blank:click", (e) => {
    settingType.value = "all";
  });
  lf.value?.on("node:mousedown", ({ data }) => {
    lf.value?.selectElementById(data.id, false);
    getSettingInfo(data);
  });
  lf.value?.on("edge:click", ({ data }) => {
    lf.value?.selectElementById(data.id, false);
    getSettingInfo(data);
  });
  lf.value?.on("connection:not-allowed", (data) => {
    ElMessage.error(data.msg);
    return false;
  });
  lf.value?.on("node:dnd-add", ({ data }) => {
    // 选中节点 更改信息
    lf.value?.selectElementById(data.id, false);
    getSettingInfo(data);
    lf.value?.container.focus(); // 聚焦 能够使用键盘操作
  });
};
/**
 * @description 获取数据
 */
const getData = () => {
  console.log(lf.value?.getGraphData());
};
/**
 * @description 提交 验证数据
 */
const submit = () => {
  // const { nodes } = lf.value?.getGraphData() as LogicFlow.GraphData;
  // for (let index = 0; index < nodes.length; index++) {
  //   const data = nodes[index];
  //   const { properties } = data;
  //   console.log(properties,'properties')
  //   // 循环配置项
  //   for (const key in properties) {
  //     // 数组配置项 判断是否为空
  //     if (Array.isArray(properties[key])) {
  //       if (requiredConfig[key] && properties[key].length === 0) {
  //         return ElMessage.error(
  //           `${data.text?.value}节点 ${requiredConfig[key]}`
  //         );
  //       }
  //     } else {
  //       // 非数组配置项 判断是否为空
  //       if (requiredConfig[key] && !properties[key]) {
  //         return ElMessage.error(
  //           `${data.text?.value}节点 ${requiredConfig[key]}`
  //         );
  //       }
  //     }
  //   }
  // }
  // console.log(lf.value?.getGraphData());
  // let list = lf.value?.getGraphData()
  // localStorage.setItem('logicFlowList',JSON.stringify(list))
};

onMounted(() => {
  lf.value = new LogicFlow({
    container: logicFlowRef.value!,
    grid: true,
    style: {
    edge: {
      arrow: false // 全局关闭所有边的箭头
    }
  },
    keyboard: {
      enabled: true,
      shortcuts: registerKeyboard(lf, nodeData, settingType),
    },
    textEdit: false,
  });
  lf.value.setTheme({
  baseEdge: {
    arrow: false,  // 禁用所有基础边的箭头
  },
  polyline: {
    arrow: false,  // 单独禁用折线箭头
  },
});
  registeNode(lf);
  initEvent(lf);
  lf.value.render({
    nodes: [
   
],
    edges: [
    
    ],
  });
  lf.value.translateCenter(); // 将图形移动到画布中央
});
</script>

<style lang="scss" scoped>
@keyframes dash-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 20; } /* 等于 dasharray 值之和(5+3=8)的2.5倍 */
}
.logic-flow-container {
  width: 100%;
  height: 100%;
  .logic-flow-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #ccc;
    padding: 0 20px;
  }
  .logic-flow-main {
    display: flex;
    width: 100%;
    height: calc(100% - 54px);
    position: relative;
    .logic-flow-setting {
      flex-basis: 400px;
      flex-shrink: 0;
      border-left: 1px solid #ccc;
    }
    .logic-flow {
      position: relative;
      flex: 1;
      height: 100%;
    }
  }
}
</style>
